<template>
  <div>
    <loadmore @setYdistance="getYdistance"
              @topMethod="topMethod"
              @bottomMethod="bottomMethod"
              ref="loadmore">
      <ul slot="loadmoreContent">
        <li v-for="(item,i) in list"
            :key="i">{{i}}</li>
      </ul>
    </loadmore>
  </div>
</template>

<script type="text/ecmascript-6">
import loadmore from 'components/loadmore';
import { userServer } from 'api/UserServer';
export default {
	components : {
		loadmore
	},
	data () {
		return {
			list : []
		};
	},
	methods : {
		topMethod () {
			userServer.list().then(res => {
				setTimeout(() => {
					this.list = res.data.list;
					if (res.data.list.length < 7) {
						this.$refs.loadmore.loadmoreEnd(true);
					} else {
						this.$refs.loadmore.loadmoreEnd();
					}

				}, 3000);
			});

		},
		bottomMethod () {
			userServer.list().then(res => {
				setTimeout(() => {
					this.list = [...res.data.list, ...this.list];
					if (res.data.list.length < 7) {
						this.$refs.loadmore.loadmoreEnd(true);
					} else {
						this.$refs.loadmore.loadmoreEnd();
					}
				}, 3000);
			});
		},
		getYdistance (distance) {
			console.log(distance);
		}
	}
};
</script>

<style lang="scss">
.loadmore-content {
  li {
    height: 50px;
    margin-bottom: 10px;
    border: 1px solid red;
  }
}
</style>
